<template>
    <div class="ma-content-block p-10">
        <a-form style="margin: 0 0 10px;" ref="formRef" :model="form" layout="inline" @submit="handlerSearch">
            <a-row :gutter="24">
                <a-col :span="24">
                    <a-form-item field="邮箱" label="邮箱" label-col-flex="auto" :label-col-style="{ width: '100px' }">
                        <a-input :style="{ width: '100%' }" placeholder="请输入邮箱" allow-clear v-model="form.phone" />
                    </a-form-item>
                </a-col>
            </a-row>
            <div class="text-center mt-5 w-full">
                <a-space size="medium">
                    <a-button type="primary" html-type="submit">
                        <template #icon><icon-search /></template>
                        搜索
                    </a-button>
                    <a-button type="outline" @click="export_click">
                        <template #icon><icon-download /></template>
                        导出
                    </a-button>
                </a-space>
            </div>
        </a-form>
        <a-table :columns="columns" :data="tableData" :pagination="pagination" @page-change="changePage">

            <template #optional="{ record }">
                <a-popconfirm @ok="change(record.id, 1)" content="确定要成功吗?" position="bottom" v-if="record.status == 0">
                    <a-button type="text" status="success">
                        <template #icon><icon-check-circle-fill /></template>成功</a-button>
                </a-popconfirm>
                <a-popconfirm @ok="change(record.id, 2)" content="确定要失败吗?" position="bottom" v-if="record.status == 0">
                    <a-button type="text" status="warning">

                        <template #icon><icon-close-circle-fill /></template>失败</a-button>
                </a-popconfirm>
                <a-popconfirm @ok="delete_item(record.id)" content="确定要删除该数据吗?" position="bottom">
                    <a-button type="text" status="danger">

                        <template #icon><icon-delete /></template>删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Message } from "@arco-design/web-vue";
import request from '@/api/userswithdrawal'
const form = reactive({
    phone: ""
});
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        ellipsis: true,
        tooltip: true,
        fixed: 'left',
        align: "center"
    },
    {
        title: '用户邮箱',
        dataIndex: 'user.phone',
        align: "center"
    },
    {
        title: '提现金额',
        dataIndex: 'money',
        align: "center"
    },
    {
        title: '到账金额',
        dataIndex: 'real_money',
        align: "center"
    },
    {
        title: '地址',
        dataIndex: 'address',
        align: "center"
    },
    {
        title: '状态',
        dataIndex: "status_name",
        align: "center"
    },
    {
        title: '日期',
        dataIndex: "created_at",
        align: "center"
    },
    {
        title: '操作',
        slotName: 'optional',
        align: "center",
        width: 300
    }
];
const tableData = ref([]);
const pagination = reactive({
    total: 1,
    current: 1,
    pageSize: 10,
    showTotal: true,
    showJumper: true
});
const getList = async () => {
    let params = {
        ...form,
        page: pagination.current,
        pageSize: pagination.pageSize
    };
    const { data: { data, total } } = await request.get_list(params);
    tableData.value = data;
    pagination.total = total;
};
getList();

const changePage = (current) => {
    pagination.current = current;
    getList();
};
const handlerSearch = () => {
    pagination.current = 1;
    tableData.value = [];
    getList()
};
const export_click = async () => {
    await request.order_export(form);
};

const change = async (id, status) => {
    await request.operate({
        id,
        status
    });
    Message.success("操作成功");
    getList();
};
const delete_item = async (id) => {
    await request.delete_data({
        ids: [id]
    });
    getList();
};
</script>